<template>
	<view class="item" @click="goPage('/query/query-info/query-info?isPosts='+isPosts+'&id='+posts.id)">
		<view class="header" v-if="isPosts">
			<template v-if="posts.status_title == '已发布' && posts.is_back === 0">
				<view></view>
				<view></view>
			</template>
			<template v-else-if="posts.status_title == '待接单' && posts.is_back === 0">
				<view class="label">接单人名称</view>
				<view class="status-text">暂未有人未接单</view>
			</template>
			<template v-else-if="posts.status_title == '待完成' && posts.is_back === 0">
				<view class="label">{{posts.user_name}}律师</view>
				<view class="status-text">处理中</view>
			</template>
			<template v-else-if="posts.status_title == '待确认' && posts.is_back === 0">
				<view class="label">{{posts.user_name}}律师</view>
				<view class="status-text">待确认</view>
			</template>

			<template v-else>
				<view class="label">{{posts.user_name}}律师</view>
			</template>
			<!-- <view class="date" v-if="[1, 2, 3].includes(posts.status)">
				剩余有效期
				<text>7</text>
				天
			</view> -->
			<!-- 			// 1 待接单（发布后没有人接单）
			// 2 待完成（接单了没有提交信息）（订单未按照规定时间完成的退款）
			// 3 待确认（提交信息后发布人未确认）（订单未按照规定时间内确认，时间到了自动打款给接单人）
			// 4 已确认（信息确认无误，确认后打款给接单人）（信息确认有问题，发起售后，由平台确认信息情况，如确认信息无误继续打款给接单人）
			// 5 已退款（售后流程中，平台确认信息有误，退还钱款给发布者）
			// 6 售后 -->
			<view class="status-1" v-if="posts.status_title == '已发布' && posts.is_back === 0">待付款</view>
			<view class="status-1" v-if="posts.status_title == '待接单' && posts.is_back === 0">待接单</view>
			<view class="status-2" v-if="posts.status_title == '待完成' && posts.is_back === 0">待完成</view>
			<view class="status-3" v-if="posts.status_title == '待确认' && posts.is_back === 0">待确认</view>
			<view class="status-4" v-if="posts.status_title == '已确认' && posts.is_back === 0">已完成</view>
			<view class="status-5" v-if="posts.status == 5">已退款</view>
			<view class="status-6" v-if="posts.is_back === 1">售后中</view>
		</view>
		<view class="header" v-if="!isPosts">
			<view></view>
			<view></view>

			<!-- <view class="date" v-if="[1, 2, 3].includes(posts.status)">
				剩余有效期
				<text>7</text>
				天
			</view> -->

			<view class="status-1" v-if="posts.status_title == '待接单'">待接单</view>
			<view class="status-2" v-if="posts.status_title == '待完成'">待完成</view>
			<view class="status-3" v-if="posts.status_title == '待确认'">待确认</view>
			<view class="status-4" v-if="posts.status_title == '已确认'">已完成</view>
			<view class="status-5" v-if="posts.status == 5">已退款</view>
			<view class="status-6" v-if="posts.is_back === 1">售后中</view>
		</view>
		<view class="box">
			<view class="col">
				<view class="order-no">{{ posts.order_sn }}</view>
				<view class="type">{{ posts.cate_name }}</view>
				<view class="price">¥{{ posts.money_total }}</view>
				<!-- <view class="number">X1</view> -->
			</view>
			<view class="col">
				<view class="text">实付款：¥</view>
				<view class="all-price">{{ posts.money_total }}</view>
			</view>
		</view>
		<view class="footer">
			<!-- <view class="btn" v-if="[2, 3].includes(posts.status) && !isPosts">
				<text class="iconfont icon-tuikuan"></text>
				毁约赔偿
			</view> -->
			<view class="btn">
				<text class="iconfont icon-chakan"></text>
				查看详情
			</view>
			<view class="btn" v-if="['已发布'].includes(posts.status_title) && posts.is_back === 0 && isPosts"
				@click.passive.stop="doOrderPay">
				<text class="iconfont icon-tuikuan"></text>
				去支付
			</view>
			<view class="btn" v-if="['待完成','已完成','待确认'].includes(posts.status_title) && posts.is_back === 0 && isPosts"
				@click.passive.stop="doAfterSales">
				<text class="iconfont icon-tuikuan"></text>
				申请售后
			</view>
			<view class="btn" v-if="['待确认'].includes(posts.status_title)&& posts.is_back === 0 && isPosts"
				@click.passive.stop="doOrderOk">
				<text class="iconfont icon-wancheng"></text>
				确认完成
			</view>

			<view class="btn" v-if="['待完成'].includes(posts.status_title) && posts.is_back === 0&& !isPosts"
				@click.passive.stop="goPage('/query/query-info/query-info?isPosts='+isPosts+'&id='+posts.id+'&status=998')">
				<text class="iconfont icon-tijiao"></text>
				提交资料
			</view>
			<view class="btn" v-if="posts.is_back !== 0 && isPosts" @click.passive.stop="doAfterSalesInfo">
				<text class="iconfont icon-tuikuan"></text>
				售后进度
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { ref, defineComponent } from 'vue';
	import useRouter from '@/hooks/useRouter.ts';
	export default defineComponent({
		name: 'CollaborativeItem',
		props: {
			// 定义props
			posts: {
				type: Object,
				required: true
			},
			isPosts: {
				type: Boolean,
				default: true // 默认不显示posts内容，根据实际需求调整
			}
		},
		emits: [
			'orderOk'
		],
		setup(props, { attrs, slots, emit }) {
			const router = useRouter();
			const goPage = (url : any) => {
				router.push(url); // 跳转到QueryDetail页面，并传递id参数
			};
			const doAfterSales = () => {
				router.push({
					url: '/commonPage/query-coll-service/afterSaleService',
					params: {
						id: props.posts.id, // 订单ID。
						type: "query"
					},
				})
			}
			const doAfterSalesInfo = () => {
				router.push({
					url: '/commonPage/query-coll-service/afterSalesProgress',
					params: {
						id: props.posts.id, // 订单ID。
						type: "query"
					},
				})
			}
			const doOrderOk = () => {
				emit("orderOk", props.posts);
			}
			const doOrderPay = () => {
				emit("doOrderPay", props.posts);
			}
			return {
				goPage,
				doOrderOk,
				doAfterSales,
				doOrderPay,
				doAfterSalesInfo
			};
		}
	});
</script>

<style lang="scss" scoped>
	.item {
		margin-top: 24rpx;
		background: #ffffff;
		box-shadow: 0rpx 2rpx 42rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 13rpx;

		.header,
		.footer {
			background: #fafafa;
			padding: 20rpx 25rpx;
		}

		.footer {
			padding: 20rpx 0;
			display: flex;
			font-family: PingFang;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			justify-content: flex-end; // 水平居右对齐

			.btn {
				padding: 0 40rpx;
				position: relative;
				display: flex;
				align-items: center; // 垂直居中

				.iconfont {
					color: #c91c1f; // 设置图标颜色，根据实际图标调整
					margin-right: 10rpx;
				}
			}

			.btn::after {
				content: ' ';
				display: inline-block;
				width: 1rpx;
				height: 19rpx;
				background: #999999;
				opacity: 0.38;
				position: absolute;
				right: 0;
				top: 10rpx;
			}

			.btn:last-child::after {
				display: none; // 最后一个按钮没有竖线分割线
			}
		}

		.header {
			border-radius: 13rpx 13rpx 0 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between; // 水平居中
			font-family: PingFang;
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;

			.label {
				color: #999999;
			}

			.status-text {
				color: #333333; // 设置状态文字颜色为红色，根据实际状态值调整颜色
			}

			.date {
				color: #333333; // 设置状态文字颜色为红色，根据实际状态值调整颜色

				text {
					color: #c91c1f;
				}
			}

			.status {
				color: #333333; // 设置状态文字颜色为红色，根据实际状态值调整颜色
			}

			.status-1,
			.status-2,
			.status-3,
			.status-6 {
				color: #c91c1f;
			}

			.status-4 {
				color: #11bb65;
			}
		}

		.footer {
			background: #fafafa;
			border-radius: 0 0 13rpx 13rpx;
		}

		.box {
			display: flex;
			flex-direction: column;
			justify-content: space-between; // 垂直居中
			padding: 20rpx 25rpx 0rpx; // 设置内边距，使内容与边框有一定的距离

			.col {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				line-height: 60rpx; // 设置行高，使文字垂直居中
				font-family: PingFang;
				font-weight: 400;
				font-size: 24rpx;
				position: relative;

				.order-no {
					color: #999999;
				}

				.type {
					color: #000000;
					margin-left: 60rpx;
				}

				.price {
					color: #c91c1f;
					margin-left: 80rpx;
				}

				.number {
					color: #999999;
					position: absolute;
					right: 0;
				}

				.text {
					font-family: PingFang;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}

				.all-price {
					font-size: 50rpx;
					color: #c91c1f;
					margin-left: 10rpx;
				}
			}

			.col:nth-child(2) {
				margin-top: 24rpx;
				justify-content: flex-end;
			}
		}
	}
</style>